    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用H5做一个tab栏</title>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            width: 100%;
            height: 100%;
        }
        body{
            width: 100%;
            height: 100%;
        }

        .wrap{
            width: 1000px;
            height: 1000px;
            margin: 50px auto;
        }
        .nav{
            list-style: none;
            margin: 0 auto;
            border: 2px solid rgba(18, 28, 224, 0.52);
            width: 603px;
            height: 35px;
            font:30px/35px "Microsoft YaHei UI"
        }

        .nav li{
            /*display: inline-block;*/
            border-left:1px solid rgba(18, 28, 224, 0.52);
            float: left;
            background: aqua;
            color: #f52f4c;
        }
        .wrap .nav .li1{
            border-left:0px solid rgba(18, 28, 224, 0.52);
        }
        .nav li a{
            display: inline-block;
            width: 200px;
            height: 35px;
            text-decoration: none;
            text-align: center;


        }
        .content{
            margin: 0 auto;
            text-align: center;
            font-size: 24px;
            width: 607px;
            height: 386px;
            /*overflow: hidden;*/
            /*display: none;*/

        }
        .content .content1{
            border-top: 0;
        }
        .content1,.content2,.content3{
            border: 2px solid rgba(18, 28, 224, 0.52);
            /*border-bottom: 0;*/
            display: none;
        }
        .nav .selected{
            background: #f52f4c;
            color: #fefefe;
            font:30px/35px "Microsoft YaHei UI";
        }
    </style>
    <body>
    <div class="wrap">
        <div class="nav">
            <li class="" data-cont="elite"><a href="#" >elite team</a></li>
            <li class="li2" data-cont="narmal"><a href="#">narmal team</a></li>
            <li class="li3" data-cont="bad"><a href="#">bad team</a></li>
        </div>
        <div class="content">
            <div class="content1" id="elite">
                <p>
                    1、说我眼里只有江山br<br>

                    可你不知道<br>

                    你是我最爱的那座城池<br><br>

                    2、漠北孤城<br>

                    你在王城帝都<br>

                    我在的漠北那里也是你的王土<br><br>

                    3、一树之下一人执剑<br>

                    后千军万马开疆辟土<br>

                    我终于能够娶你<br><br>
                </p>
            </div>
            <div class="content2" id="narmal">
                <p>
                    5、牵马不再回望城门<br>

                    你转身覆了我的江南烟雨<br>

                    我唯独阁楼空醒盼你不离<br>v

                    6、万里山河<br>

                    你是山河的星星点点<br>

                    我是保护山河寸土的铁骑<br><br>

                    7、冰冻三尺非一日之寒v<br>

                    饮鸩止渴非一瞬之贪<br>

                    琴瑟和谐非一时之恋<br><br>
                </p>

            </div>
            <div class="content3" id="bad">
                <p>
                    8、岁月荏苒v<br>

                    青灯孤影月为伴<br>

                    弱水三千不敌昔日你巧笑嫣然<br><br>

                    9、孤身只影中?<br>

                    等你?<br>

                    出入成双?<br><br>

                    10、太平盛世里???<br>

                    因你???v<br>

                    兵荒马乱??????<br><br>
                </p>

            </div>
        </div>
    </div>
    <script>
        (function (key) {
            var navLiArr=document.querySelectorAll('.nav li');
            var contArr=document.querySelectorAll('.content div')
            // console.log(navLiArr.length)
            // console.log(contArr.length)
            for ( var i=0;i<navLiArr.length;i++){

                // navLiArr[i].index=i;
                if (key===i){
                    navLiArr[key].classList.add('selected');

                   var tepId= navLiArr[key].dataset['cont']
                    // document.querySelector("").style.display='block';
                   document.querySelector("#"+tepId).style.display='block';
                }



                navLiArr[i].onclick=function () {

                    // var contId=navLiArr[this.index].dataset['cont'];

                    // for (var j=0;j<navLiArr.length;j++){
                    //     navLiArr[j].classList.remove('selected');
                    //     contArr[j].style.display='none';
                    // }
                    //
                    // // console.log(this)
                    // this.classList.add('selected');
                    // document.querySelector('#'+contId).style.display='block';
                    var currentLi=document.querySelector('.selected');

                    currentLi.classList.remove('selected');

                    var liId=currentLi.dataset['cont'];

                    document.querySelector("#"+liId).style.display='none';

                    this.classList.add('selected');

                    var curentID=this.dataset['cont'];

                    document.querySelector('#'+curentID).style.display='block';




                }
            }
        })(1)

    </script>
    </body>
    </html>